import React from 'react';
import { Switch } from 'antd';

interface GlobalPermissionToggleProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  loading?: boolean;
}

const GlobalPermissionToggle: React.FC<GlobalPermissionToggleProps> = ({
  checked,
  onChange,
  loading = false
}) => {
  return (
    <div className={`rounded-lg border px-4 py-3 mb-4 ${checked ? 'bg-[var(--geekblue-1)] border-[var(--geekblue-2)]' : 'bg-[var(--fill-1)] border-gray-200'}`}>
      <div className="flex items-center justify-between">
        <div className="flex-1">
          <h3 className="text-sm font-medium text-gray-900 mb-1">
            全局开启数字人权限
          </h3>
          <p className="text-xs leading-relaxed text-[var(--text-secondary)]">
            开启后,所有智能体均能开启数字人,关闭后,仅授权智能体可开启数字人
          </p>
        </div>
        <div className="ml-4">
          <Switch
            checked={checked}
            onChange={onChange}
            loading={loading}
            className="bg-gray-300"
          />
        </div>
      </div>
    </div>
  );
};

export default GlobalPermissionToggle; 